<template>
    <div class="box">
        <nav>
            <router-link :to="{name:'me_index'}">
                 <span v-if="'me_index'==pageName"><img src="../../../assets/images/store_pressed@2x.png" alt="" class="fot_img" style="width:21px; height:21px"></span>
                 <span v-else><img src="../../../assets/images/store_normal@2x.png" alt="" class="fot_img" style="width:21px; height:21px"></span><br>
                <span :class="{active:'me_index'==pageName}">店铺</span>
            </router-link>
            <router-link to  @click.native="shequn(accountinfo.companyId)">
                <span v-if="'me_association'==pageName"><img src="../../../assets/images/shequn_pressed@2x.png" alt="" class="fot_img"></span>
                 <span v-else><img src="../../../assets/images/shequn_normal@2x.png" alt="" class="fot_img"></span><br>
                <span :class="{active:'me_association'==pageName}">社群</span>
            </router-link >
            <router-link :to="{name:'me_indent'}">
                <span v-if="'me_indent'==pageName"><img src="../../../assets/images/dd_pressed@2x.png" alt="" class="fot_img" style="width:18px; height:21px"></span>
                 <span v-else><img src="../../../assets/images/dd_normal@2x.png" alt="" class="fot_img" style="width:18px; height:21px"></span><br>
                <span :class="{active:'me_indent'==pageName}">订单</span>
            </router-link>
            <router-link :to="{name:'me_goods'}">
                <span v-if="'me_goods'==pageName"><img src="../../../assets/images/shangpin-_pressed@2x.png" alt="" class="fot_img"></span>
                 <span v-else><img src="../../../assets/images/shangpin-_normal@2x.png" alt="" class="fot_img"></span><br>
                <span :class="{active:'me_goods'==pageName}">商品</span>
            </router-link>
             <router-link :to="{name:'me_mine'}">
                 <span v-if="'me_mine'==pageName"><img src="../../../assets/images/mine-_pressed@2x.png" alt="" class="fot_img" style="width:18px; height:21px"></span>
                 <span v-else><img src="../../../assets/images/mine-_normal@2x.png" alt="" class="fot_img"  style="width:18px; height:21px"></span><br>
                <span :class="{active:'me_mine'==pageName}">我的</span>
            </router-link>
        </nav>

         <div v-show="newhack" class="shaliang">
      <div class="banxin">
       <img src="../../personal/images/组-10@2x.png">
      </div>
        <div class="kaitong" @click="newkai()">去开通</div>
        <div class="delete" @click="guanle()"></div>
      </div>
    </div>
</template>

<script>
export default {
        props: {
    pageName: String
  },
   data () {
      return {
        accountinfo:{},
        newhack:false
      }
    },
    mounted(){
        this.info()
    },
    methods:{
        info(){
        this.$http.get(this.APIURL_PREFIX+'/api/companyInfo').then((response) => {
          this.accountinfo =response.data.data;
				}).catch(function(err){
					console.log(err)
         }).then();
        },
        guanle(){
            this.newhack=false
        },
        newkai(){
            // 去付钱
            layer.msg('去付钱')
             window.location='/wap/new_pay.html'
        },
        shequn(id){
            this.$http.get(this.APIURL_PREFIX + '/api/wap/company/community/'+id).then((response) => {
               console.log(response)


               if(response.data.data.payCommunity==0){
                     //  没有开通的情况
             this.newhack=true
               }else{
                
                //  已经开通的情况
             window.location='/wap/hudong.html?id='+id
               }
         }).catch(function (err) {
                console.log(err)
         });
            
        }
    }
}
</script>

<style>
.active{
    color:#0FA9FE!important;
}
*{
    margin:0;
    padding:0;
}
.box{
width:100%;
height:50px;
background:white;;
position:fixed;
bottom: 0;
left:0;
}
.box nav{
    width:100%;
    height:100%;
    display: flex;
    justify-content:space-between;
    padding-left: 25px;
    padding-right: 25px;
}
.box nav a {
    margin-top:6px;
}
.box nav a span:last-child{
    color:#CDCDCD;
}
.fot_img{
    width:20px;
    height:21px;
}
.shaliang{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:10;
}
.banxin{
  width: 84%;
  margin-left: 8%;
  margin-top: 60px;
  position:relative;
  height:460px;
  z-index:20;
}
.banxin img{
  width:100%;
  height:100%;
  vertical-align:middle;
}
.kaitong{
  height:40px;
  width:40%;
  background:green;
  border-radius:10px;
  text-align:center;
  line-height:40px;
  color:white;
  position:absolute;
  left:30%;
  top:375px;
   z-index:21;
}
.delete{
  width:30%;
  height:60px;
  position:absolute;
  left:35%;
  top:474px;
   z-index:21;
}
</style>
